<template>
    <div class="aff-title">
        <span>类别名称:</span>
        <input type="text">
        <el-button type="primary" class="el-button">查询</el-button>
        <el-button class="el">重置</el-button>
    </div>
    <el-button type="primary" class="box">+添加公告分类</el-button>
  <el-table :data="tableData" style="width: 100%" class="el-table">
    <el-table-column prop="date" label="ID" width="180" />
    <el-table-column prop="name" label="排序" width="180" />
    <el-table-column prop="address" label="分类名称" width="300" />
    <el-table-column prop="data" label="父级ID" width="180" />
    <el-table-column prop="state" label="状态" />
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="1000" class="el-pagination" />
</template>

<script setup lang="ts">
    const tableData = [
  {
    date: '1',
    name: '1',
    address: '普通公告',
    data:'0',
    state:'禁用'
  },
  {
    date: '2',
    name: '2',
    address: '紧急公告',
    data:'0',
    state:'正常'
  },
  {
    date: '2',
    name: '2',
    address: '紧急公告',
    data:'0',
    state:'正常'
  },
  {
    date: '2',
    name: '2',
    address: '紧急公告',
    data:'0',
    state:'正常'
  },
]

</script>

<style scoped lang="scss">
.aff-title{
    width: 100%;
    input{
        margin-left: 5px;
    }
    .el-button{
        margin-left: 10px;
    }
}
.box{
    margin: 10px 0;
}
.el-table{
    margin-bottom: 20px;
}
</style>